<template>
    <div class="diagnosis-container">
      <table class="modern-table">
        <thead>
          <tr>
            <th class="category-header">类别</th>
            <th>内容</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>症状</td>
            <td v-html="reason || '暂无症状数据'"></td>
          </tr>
          <tr>
            <td>症状原因</td>
            <td v-html="symptom || '暂无症状原因数据'"></td>
          </tr>
          <tr>
            <td>调理方法</td>
            <td v-html="method || '暂无调理方法数据'"></td>
          </tr>
        </tbody>
      </table>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        reason: '', // 症状数据
        symptom: '', // 症状原因数据
        method: '' // 调理方法数据
      };
    },
    created() {
      this.loadFromLocalStorage();
    },
    methods: {
      loadFromLocalStorage() {
  
        this.reason = localStorage.getItem('reason') || '';
        this.symptom = localStorage.getItem('symptom') || '';
        this.method = localStorage.getItem('method') || '';
      }
    }
  };
  </script>
  
  <style scoped>
  .diagnosis-container {
    margin: 20px auto; /* 添加上下外边距 */
    padding: 20px;
    max-width: 70%; /* 限制表格宽度 */
    background-color: #f3fcf5; /* 柔和背景色 */
    border-radius: 10px; /* 圆角效果 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* 柔和阴影 */
  }
  
  .modern-table {
    width: 100%; /* 表格宽度 */
    border-collapse: separate;
    border-spacing: 0; /* 保持分隔单元格 */
    font-size: 28px; /* 字体大小 */
    text-align: left;
    color: #333333; /* 默认文字颜色 */
  }
  
  thead th {
    background-color: #84c186; /* 表头背景色 */
    color: #ffffff; /* 表头文字颜色 */
    text-transform: uppercase; /* 转换为大写 */
    font-weight: bold;
    padding: 15px; /* 表头内边距 */
    border-top-left-radius: 10px; /* 左上圆角 */
    border-top-right-radius: 10px; /* 右上圆角 */
  }
  
  .category-header {
    color: #ffffff !important; /* 强制将类别文字颜色设为白色 */
  }
  
  tbody tr:nth-child(even) {
    background-color: #f9f9f9; /* 偶数行背景色 */
  }
  
  tbody tr:nth-child(odd) {
    background-color: #ffffff; /* 奇数行背景色 */
  }
  
  tbody tr:hover {
    background-color: #eaf5ea; /* 鼠标悬停背景色 */
  }
  
  td, th {
    padding: 20px; /* 单元格内边距 */
    border-bottom: 1px solid #e0e0e0; /* 底部分隔线 */
  }
  
  td:first-child, th:first-child {
    width: 1%; /* 第一列宽度自适应 */
    white-space: nowrap; /* 防止文字换行 */
    font-weight: bold; /* 第一列加粗 */
  }
  
  td:last-child {
    color: #555555; /* 内容列文字颜色 */
    font-size: 28px; /* 内容列字体稍大 */
    line-height: 1.6; /* 行高适中 */
  }
  
  /* 小屏优化 */
  @media (max-width: 768px) {
    .diagnosis-container {
      padding: 15px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 缩小阴影 */
    }
  
    .modern-table {
      font-size: 16px;
    }
  
    td, th {
      padding: 10px; /* 减少单元格间距 */
    }
  }
  </style>
  